<template>
	<view class="warp">
		<uni-nav-bar background-color="#fff"
		 color="#0b2659" :border="false" :fixed="true"
		  @clickLeft="left"  left-icon="left" 
		   leftWidth="50rpx" rightWidth="10rpx" 
		   :statusBar="true"  
		   >
		   <view class="title_box">
		 	 <view class="left">
				<view class="left_text">
					{{reportinfo.productName}}
				</view>
			</view>
		 	<view class="right">
				<!-- <uni-icons fontFamily="CustomFont" :size="26">{{'\ue62b'}}</uni-icons> -->
		 	</view>
		   </view>
		   </uni-nav-bar>
		   <view class="wealth" v-if="reportType=='wealth'">
			   <view class="bg">
			   	<image style="width: 100%;" :src="reportinfo.backgroundImage" mode="widthFix"></image>
			   </view>
			   
		   	<view class="button_box">
		   	<view class="button" @click="toorder()">
		   			立即解锁
		   	</view>
		   	</view>
		   </view>
		   <view class="shiye" v-if="reportType=='career'">
		   			   <view class="bg">
						   <image style="width: 100%;" :src="reportinfo.backgroundImage" mode="widthFix"></image>
		   			   </view>
		   			   
		   	<view class="button_box">
		   	<view class="button" @click="toorder()">
		   			立即解锁
		   	</view>
		   	</view>
		   </view>
		   <view class="hunyin" v-if="reportType=='marriage'">
		   			   <view class="bg">
						   <image style="width: 100%;" :src="reportinfo.backgroundImage" mode="widthFix"></image>
		   			   	
		   			   </view>
		   			   
		   	<view class="button_box">
		   	<view class="button" @click="toorder()">
		   			立即解锁
		   	</view>
		   	</view>
		   </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				reportinfo:{},
				 reportType:null,
			};
		},
		onLoad(options) {
			 if('produtinfo' in options){
				 let obj = JSON.parse(decodeURIComponent(options.produtinfo))
				 this.reportinfo=obj
				 if(this.reportinfo.productType==1){
					 this.reportType='wealth'
				 }else if(this.reportinfo.productType==2){
					 this.reportType='marriage'
				 }else if(this.reportinfo.productType==3){
					 this.reportType='career'
				 }
			 }
			
		},
		methods:{
			toorder(){
				uni.navigateTo({
					url:"/pages/moreModule/order/order?produtinfo="+encodeURIComponent(JSON.stringify(this.reportinfo))
				})
			},
			left(){
				uni.navigateBack({delta:1})
			}
		}
	}
</script>

<style lang="scss" scoped>
.warp{
	.title_box{
		padding: 0 20rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.left{
			display: flex;
			align-items: center;
			.left_text{
				font-size: 30rpx !important;
				margin-right: 10rpx;
				
			}
			.left_icon{
				width: 30rpx;
				height: 30rpx;
				text-align: center;
				line-height: 30rpx;
				border: 2rpx solid #323333;
				border-radius: 50%;
				
			}
			
		}
	}
	.wealth{
		.bg{
			width: 100%;
			// height: 2160rpx;
			// background: url('/static/images/wealth.png');
			// background-size: cover;
		}
		.button_box{
			margin-top: -10rpx;
			background-color: #fdcd9d;
			padding: 100rpx 30rpx 30rpx;
			.button{
				 padding: 20rpx 50rpx;
				 background-color: #fe6079;
				 text-align: center;
				 border-radius: 36rpx;
				 color: #fff;
			}
		}
		
	}
	.hunyin{
		.bg{
			width: 100%;
			// height: 2160rpx;
			// background: url('/static/images/hunyin.jpg');
			// background-size: cover;
		}
		.button_box{
			background-color: #fec4ff;
			padding: 100rpx 30rpx 30rpx;
			margin-top: -6rpx;
			.button{
				 padding: 20rpx 50rpx;
				 background-color: #fe6079;
				 text-align: center;
				 border-radius: 36rpx;
				 color: #fff;
			}
		}
	}
	.shiye{
		.bg{
			width: 100%;
			// height: 2580rpx;
			// background: url('/static/images/shiye.jpg');
			// background-size: cover;
		}
		.button_box{
			margin-top: -10rpx;
			background-color: #ffacd8;
			padding: 100rpx 30rpx 30rpx;
			.button{
				 padding: 20rpx 50rpx;
				 background-color: #fe6079;
				 text-align: center;
				 border-radius: 36rpx;
				 color: #fff;
			}
		}
	}
}
</style>
